<template>
  <div class="deploy">
    <div class="cardTop">设置服务器资源</div>
    <el-card class="elCard">
      <div class="left">
        <ul class="leftUl">
          <li class="leftLi">
            <div class="circle">
              <img src="../../assets/image/圆圈.svg" alt="" />
            </div>
            <div class="text">基础信息</div>
          </li>
          <li class="leftLi2">
            <div class="circle">
              <img src="../../assets/image/圆圈.svg" alt="" />
            </div>
            <div class="text">高级配置</div>
          </li>
          <li class="leftLi3">
            <div class="circle3">
              <img src="../../assets/image/圆圈.svg" alt="" />
            </div>
          </li>
        </ul>
      </div>

      <div class="elForm">
        <el-form :model="form" :rules="rules" label-width="120px">
          <el-form-item label="IP">
            <el-input v-model="form.cont_name" placeholder="请输入IP地址" />
          </el-form-item>

          <el-form-item label="用户名">
            <el-input v-model="form.cont_name1" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.cont_name2" placeholder="请输入密码" />
          </el-form-item>

          <div class="backfull">
            <el-button type="primary" @click="handleUpdate">自动回填</el-button>
          </div>

          <el-form-item label="服务器名称" prop="cont_name">
            <el-input
              v-model="form.cont_name3"
              placeholder="请输入服务器名称"
            />
          </el-form-item>
          <el-form-item label="GPU型号" prop="cont_name">
            <el-input v-model="form.cont_name4" placeholder="请输入GPU型号" />
          </el-form-item>
          <el-form-item label="GPU数量" prop="cont_name">
            <el-input v-model="form.cont_name5" placeholder="请输入GPU数量" />
          </el-form-item>
          <el-form-item label="服务器分组">
            <el-select v-model="form.cont_name6" placeholder="请选择服务器分组">
              <el-option
                v-for="(item, index) in modelList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
            <el-button
              style="margin-left: 150px"
              type="primary"
              @click="onSubmit"
              >新建分组</el-button
            >
          </el-form-item>

          <!-- <el-form-item label="选择镜像">
            <el-select v-model="form.image" placeholder="请选择活动区域">
              <el-option
                v-for="(item, index) in imageList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item> -->

          <!-- <el-form-item label="选择模型">
            <el-select v-model="form.model" placeholder="请选择基础模型">
              <el-option
                v-for="(item, index) in modelList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item> -->

          <div class="high">
            <el-form-item label="CPU" prop="cont_name">
              <el-input v-model="form.cont_name7" placeholder="请输入CPU名称" />
            </el-form-item>
            <el-form-item label="内存" prop="cont_name">
              <el-input
                v-model="form.cont_name8"
                placeholder="请输入内存大小"
              />
            </el-form-item>
            <el-form-item label="硬盘" prop="cont_name">
              <el-input
                v-model="form.cont_name9"
                placeholder="请输入硬盘大小"
              />
            </el-form-item>
          </div>
          <div class="affirm">
            <el-button type="primary" @click="onSubmit">确认</el-button>
            <el-button style="margin-left: 350px" @click="cancel"
              >取消</el-button
            >
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElRadio,
  ElInput,
  ElRadioGroup,
  ElUpload,
  ElSelect,
  ElOption,
  ElMessage,
  ElIcon,
  ElCard
} from 'element-plus'
import { ref, reactive, computed } from 'vue'
import { beginDeploy } from '../../api/model.js'
import { useRouter } from 'vue-router'
const router = useRouter()

// const isHighShow = ref(false) // 高级配置显示
// const isCreate = ref(false) // 下拉图片切换

// //高级配置 显示事件
// const mouseupHandle = () => {
//   isCreate.value = !isCreate.value
//   isHighShow.value = !isHighShow.value
// }

// //高级配置 样式更改
// const changeClass = computed(() => {
//   // if (isCreate.value) {
//   //   return 'leftLi isCreateTrue'
//   // } else {
//   //   return 'leftLi'
//   // }
// })

const form = ref({
  cont_name: '',
  cont_name1: '',
  cont_name2: '',
  cont_name3: '',
  cont_name4: '',
  cont_name5: '',
  cont_name6: '',
  cont_name7: '',
  cont_name8: '',
  cont_name9: ''
})

const modelList = ref([
  'agi ui',
  'autogen',
  'bert-base-chinese',
  'ChatGLM2-6B',
  'chatglm2-6b-32k',
  'internlm-chat-7b-8k',
  'lang_output',
  'langport',
  'langport_logs',
  'LocalAI',
  'logs',
  'mambaforge',
  'ningyu-spring-15b-v1.0-fp16',
  'openbuddy-3@b-v1.3-ggml',
  'openbuddy-30b-v7.1-bf16',
  'openbuddy-7b-v4',
  'openbuddy-f-7b-v6-bf16',
  'openbuddy-ggm1-30b-v1.3',
  'openbuddy-llama2-13b-v8.1-fp16',
  'openbuddy-lamacpp-13b-v5-q5',
  'openbuddy-mistral-7b-v13.1',
  'openbuddy-openllama-13b-v7-fp16',
  'openbuddy-openllama-7b-v12-bf16',
  'openbuddy-openllama-7b-v5-fp16',
  'openbuddy-zephyr-7b-V14.1',
  'pro-langport',
  'sentence-bert',
  'snap',
  'test4newname',
  'UIE'
])

const imageList = ref(['langport0.6', 'llama0.7'])

const rules = reactive({
  cont_name: [
    { required: true, message: '请输入正确的中文名字', trigger: 'blur' },
    {
      pattern: /^(?:[\u4e00-\u9fa5·]{2,16})$/,
      message: '中文名字格式错误',
      trigger: 'blur'
    }
  ]
})

const onSubmit = () => {
  const requestData = {
    imgname: form.value.image,
    cont_name: form.value.cont_name,
    model_path: '/nvme1/ningyu',
    model_name: 'aa',
    workmode: form.value.workmode,
    docker_ports: form.value.server_port,
    local_ports: form.value.local_port,
    net_name: form.value.net,
    ctrad: form.value.worker_port,
    logs_path: '/nvme1/ningyu/langport_logs'
  }
  console.log(requestData, 'msgData')
  beginDeploy(requestData)
    .then(res => {
      // 处理请求成功的响应
      if (res.msg === 200) {
        form.value = res.data
        imageList.value = res.data.imgname
        modelList.value = res.data.cont_name
      }
      ElMessage({
        showClose: true,
        message: '恭喜部署成功',
        type: 'success'
      })
    })
    .catch(error => {
      // 处理请求错误
      console.error(error)
    })

  console.log('提交了表单')
}

const cancel = () => {
  router.push('./create')
}
</script>

<style lang="less" scoped>
.deploy {
  padding: 30px 60px 0 60px;

  .cardTop {
    margin-bottom: 30px;
    color: #27264d;
    font-size: 32px;
    opacity: 0.85;
    display: flex;
  }
  .elCard {
    .left {
      width: 300px;
      .leftUl {
        img {
          width: 20px;
          height: 20px;
        }
        .text {
          margin-left: 15px;
          color: #27264d;
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0;
          opacity: 0.85;
        }

        .leftLi {
          display: flex;
          .circle {
            position: relative;
          }
          .circle::after {
            content: '';
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, 0);
            width: 2px;
            height: 580px;
            background-color: #75b7ff;
          }
        }
        .leftLi2 {
          display: flex;
          margin-top: 400px;
          align-items: center;
          .textBottom {
            padding-left: 10px;
            color: rgba(112, 114, 121, 0.85);
            cursor: pointer;
            img {
              width: 15px;
              height: 12px;
            }
          }
        }
        .leftLi3 {
          display: flex;
          .circle3 {
            position: relative;
            top: 130px;
          }
        }
      }
    }
    .elForm {
      width: 1000px;

      .backfull {
        ::v-deep(.el-button) {
          width: 300px;
          margin-bottom: 20px;
        }
      }
      .affirm {
        ::v-deep(.el-button) {
          width: 300px;
          margin-bottom: 20px;
        }
      }
      .high {
        margin-top: 90px;
      }
    }
  }

  :deep(.el-card__body) {
    display: flex;
  }
}
</style>
